import { createBrowserRouter, RouteObject, RouterProvider } from "react-router";
import { lazy } from "react";
import LazySuspense from "@/components/lazy-suspense";

const HomePage = lazy(() => import("@/pages/home-page"));
const PeerJs = lazy(() => import("@/pages/peerjs-demo"));
const AudioRecorder = lazy(() => import("@/pages/audio-recorder"));
const DuckShooter = lazy(() => import("@/pages/duckshooter"));
const GameBlock = lazy(() => import("@/pages/game-block"));
const GameBalloon = lazy(() => import("@/pages/game-balloon"));
const Test = lazy(() => import("@/pages/test"));
const MapGame = lazy(() => import("@/pages/map-game"));

export const routes: RouteObject[] = [
  { path: "/", element: <HomePage /> },
  { path: "/game-block", element: <GameBlock /> },
  { path: "/game-balloon", element: <GameBalloon /> },
  { path: "/game-duckshooter", element: <DuckShooter /> },
  { path: "/peerjs", element: <PeerJs /> },
  { path: "/audio-recorder", element: <AudioRecorder /> },
  {
    path: "/test",
    element: (
      <LazySuspense>
        <Test />
      </LazySuspense>
    ),
  },
  { path: "/game-map", element: <MapGame /> },
];

export default function App() {
  return <RouterProvider router={createBrowserRouter(routes)} />;
}
